<!--
 @description
 @fileName index.vue
 @author zengqiongying
 @created 2023/01/05 16:03:05
-->
<template>
  <div>
    <List
      ref="list"
      class="serices"
      :finished.sync="finished"
      :reset-fun="resetData"
      :load="load"
      :refresh="load"
    >
      <ShowItem
        v-for="(l,i) in list"
        :key="i"
        :host="imgHost"
        :src="l.picUrl"
        :name="l.description"
        @click.native.stop="clickHandle(l)"
      />
    </List>
  </div>
</template>

<script>
import { gcenterProductSeries } from '@/apis/search'
import List from '@/components/PageList'
import ShowItem from './components/ShowItem'
export default {
  name: 'SearchSerices',
  components: { List, ShowItem },
  refresh: true,
  props: {
    searchValue: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      list: [],
      finished: false,
      imgHost: `${process.env.VUE_APP_STATIC}`
    }
  },

  computed: {},

  created() {
    this.$on('refresh', this.resetPageData)
  },
  activated() {},

  mounted() {},

  methods: {
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    load(page, pageSize) {
      return gcenterProductSeries(this.searchValue).then(res => {
        this.list = res.data || []
        this.finished = true
      })
    },
    resetData() {
      this.list = []
    },
    clickHandle(g) {
      this.$router.push({ name: 'GoodsList', query: { sericesId: `${g.attrId}_${g.id}`, name: g.description }})
    }
  }
}

</script>
<style lang='less' scoped>
/deep/ .page-list{
  display: flex;
  flex-wrap: wrap;
  padding-top: 6px;
}
</style>
